<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <title>HIS UI</title>
    <link rel="stylesheet" type="text/css" href="../../dist/css/hisui.css">
    <script type="text/javascript" src="../../dist/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../../dist/js/jquery.hisui.js"></script>
    <script type="text/javascript" src="../../dist/js/locale/hisui-lang-zh_CN.js"></script>
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script src="../jquery-tag-demo.js" type="text/javascript"></script>
    <script src="../mock-min.js" type="text/javascript"></script>
    <script src="./data.js" type="text/javascript"></script>
</head>
<body>
    <h2>放大镜</h2>
    <h3>说明:</h3>
    <span>在首次初始化时不初始化列表，且个界面只有一个列表。即只保留当前下拉框列表数据。</span>
	<div class="demo-exp-code entry-content"> 
        <p>基础使用</p>
        安全组 &nbsp;&nbsp;&nbsp;<input id="group" class="textbox" />
        <script type='text/javascript'>
            $(function(){
                $("#group").lookup({
                    width:200,panelWidth:500,
                    url:'getGroup',
                    mode:'remote',
                    idField:'HIDDEN',
                    textField:'Description',
                    columns:[[  
                        {field:'Description',title:'安全组名称',width:200},  
                        {field:'HIDDEN',title:'安全组ID',width:50}  
                    ]],
                    pagination:true,
                    onSelect:function(index,rowData){
                        console.log("index="+index+",rowData=",rowData);
                        //$('#group').lookup('setText',rowData.HIDDEN+"-"+rowData.Description);  //textField虽是Description，在onSelect这可以自己改显示的值 但此种操作需要自己处理好查询条件间的关系
                    }
                });
            })
        </script>
        <pre class="prettyprint lang-html"><code>安全组 &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;input id="group" class="textbox" /&gt;
&lt;script type='text/javascript'&gt;
    $(function(){
        $("#group").lookup({
            width:200,panelWidth:500,
            url:'getGroup',
            mode:'remote',
            idField:'HIDDEN',
            textField:'Description',
            columns:[[  
                {field:'Description',title:'安全组名称',width:200},  
                {field:'HIDDEN',title:'安全组ID',width:50}  
            ]],
            pagination:true,
            onSelect:function(index,rowData){
                console.log("index="+index+",rowData=",rowData);
                //$('#group').lookup('setText',rowData.HIDDEN+"-"+rowData.Description);  //textField虽是Description，在onSelect这可以自己改显示的值 但此种操作需要自己处理好查询条件间的关系
            }
        });
    })
&lt;/script&gt;</code></pre>

        <p>当输入3个字符以上开始查询</p>
        科室 &nbsp;&nbsp;&nbsp; <input id="loc" class="textbox" />
        <script type='text/javascript'>
            $(function(){
                $("#loc").lookup({
                    width:200,panelWidth:500,
                    url:'getLoc',
                    mode:'remote',
                    idField:'HIDDEN',
                    textField:'Description',
                    columns:[[  
                        {field:'Code',title:'科室代码',width:200},  
                        {field:'Description',title:'科室描述',width:200},  
                        {field:'HIDDEN',title:'科室ID',width:50}  
                    ]],
                    pagination:true,
                    onSelect:function(index,rowData){
                        console.log("index="+index+",rowData=",rowData);
                    },
                    isCombo:true,
                    minQueryLen:3
                });
            })
        </script>
        <pre class="prettyprint lang-html"><code>科室 &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;input id="loc" class="textbox" /&gt;
&lt;script type='text/javascript'&gt;
    $(function(){
        $("#loc").lookup({
            width:200,panelWidth:500,
            url:'getLoc',
            mode:'remote',
            idField:'HIDDEN',
            textField:'Description',
            columns:[[  
                {field:'Code',title:'科室代码',width:200},  
                {field:'Description',title:'科室描述',width:200},  
                {field:'HIDDEN',title:'科室ID',width:50}  
            ]],
            pagination:true,
            onSelect:function(index,rowData){
                console.log("index="+index+",rowData=",rowData);
            },
            isCombo:true,
            minQueryLen:3
        });
    })
&lt;/script&gt;</code></pre>

        <p>禁用启用，是否只读切换示例</p>
        用户 &nbsp;&nbsp;&nbsp; <input id="user" class="textbox"/> &nbsp;&nbsp;
        <a class="op-btn">禁用</a>&nbsp;<a class="op-btn">启用</a>&nbsp;<a class="op-btn">只读</a>&nbsp;<a class="op-btn">取消只读</a>&nbsp;
        <script type='text/javascript'>
            $(function(){
                $("#user").lookup({
                    url:'getUser',
                    mode:'remote',
                    idField:'HIDDEN',
                    textField:'Description',
                    columnsLoader:function(){
                        return [[  
                            {field:'Code',title:'工号',width:150},  
                            {field:'Description',title:'姓名',width:150},  
                            {field:'HIDDEN',title:'用户ID',width:50}  
                        ]];
                    },
                    pagination:true,
                    panelWidth:500,
                });                $("#user").lookup({
                    url:'getUser',
                    mode:'remote',
                    idField:'HIDDEN',
                    textField:'Description',
                    columnsLoader:function(){
                        return [[  
                            {field:'Code',title:'工号',width:150},  
                            {field:'Description',title:'姓名',width:150},  
                            {field:'HIDDEN',title:'用户ID',width:50}  
                        ]];
                    },
                    pagination:true,
                    panelWidth:500,
                });
                $('.op-btn').linkbutton({
                    onClick:function(){
                        if($(this).text()=="禁用") $("#user").lookup("disable");
                        if($(this).text()=="启用") $("#user").lookup("enable");
                        if($(this).text()=="只读") $("#user").lookup("readonly",true);
                        if($(this).text()=="取消只读") $("#user").lookup("readonly",false);
                    
                    }
                })
            });
        </script>
        <pre class="prettyprint lang-html"><code>用户 &amp;nbsp;&amp;nbsp;&amp;nbsp; &lt;input id="user" class="textbox"/&gt; &amp;nbsp;&amp;nbsp;
&lt;a class="op-btn"&gt;禁用&lt;/a&gt;&amp;nbsp;&lt;a class="op-btn"&gt;启用&lt;/a&gt;&amp;nbsp;&lt;a class="op-btn"&gt;只读&lt;/a&gt;&amp;nbsp;&lt;a class="op-btn"&gt;取消只读&lt;/a&gt;&amp;nbsp;
&lt;script type='text/javascript'&gt;
    $(function(){
        $("#user").lookup({
            url:'getUser',
            mode:'remote',
            idField:'HIDDEN',
            textField:'Description',
            columnsLoader:function(){
                return [[  
                    {field:'Code',title:'工号',width:150},  
                    {field:'Description',title:'姓名',width:150},  
                    {field:'HIDDEN',title:'用户ID',width:50}  
                ]];
            },
            pagination:true,
            panelWidth:500,
        });
        $('.op-btn').linkbutton({
            onClick:function(){
                if($(this).text()=="禁用") $("#user").lookup("disable");
                if($(this).text()=="启用") $("#user").lookup("enable");
                if($(this).text()=="只读") $("#user").lookup("readonly",true);
                if($(this).text()=="取消只读") $("#user").lookup("readonly",false);
            
            }
        })
    });
&lt;/script&gt;</code></pre>

<p>onBeforeShowPanel事件</p>
安全组 &nbsp;&nbsp;&nbsp;<input id="group2" class="textbox" /> 当输入值为ad时，不能展开下拉面板
<script type='text/javascript'>
    $(function(){
        $("#group2").lookup({
            width:200,panelWidth:500,
            url:'getGroup',
            mode:'remote',
            idField:'HIDDEN',
            textField:'Description',
            columns:[[  
                {field:'Description',title:'安全组名称',width:200},  
                {field:'HIDDEN',title:'安全组ID',width:50}  
            ]],
            pagination:true,
            onSelect:function(index,rowData){
                console.log("index="+index+",rowData=",rowData);
            },
            onBeforeShowPanel:function(){
                if ($(this).val()=="ad") return false;
            }
        });
    })
</script>
<pre class="prettyprint lang-html"><code>安全组 &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;input id="group" class="textbox" /&gt;
&lt;script type='text/javascript'&gt;
$(function(){
$("#group2").lookup({
    width:200,panelWidth:500,
    url:'getGroup',
    mode:'remote',
    idField:'HIDDEN',
    textField:'Description',
    columns:[[  
        {field:'Description',title:'安全组名称',width:200},  
        {field:'HIDDEN',title:'安全组ID',width:50}  
    ]],
    pagination:true,
    onSelect:function(index,rowData){
        console.log("index="+index+",rowData=",rowData);
    },
    onBeforeShowPanel:function(){
        if ($(this).val()=="ad") return false;
    }
});
})
&lt;/script&gt;</code></pre>


    </div>
    <div class="demo-exp-code entry-content">
        <h3>放大镜(lookup)组件，属性、事件、方法 </h3>
        <span>扩展自验证框（validatebox）和数据网格（datagrid），下面是为放大镜（lookup）添加的属性、事件、方法</span>
        <table class="table">
            <tr class="protitle">
                <th>属性</th>
                <th>说明</th>
                <th>默认值</th>
                <th></th>
            </tr>
            <tr>
                <td>loadMsg</td>
                <td>当数据网格（datagrid）加载远程数据时显示的消息。</td>
                <td>null</td>
                <td></td>
            </tr>
            <tr>
                <td>idField</td>
                <td>id 的字段名。</td>
                <td>null</td>
                <td></td>
            </tr>
            <tr>
                <td>textField</td>
                <td>显示在文本框中的 text 字段名。</td>
                <td>null</td>
                <td></td>
            </tr>
            <tr>
                <td>mode</td>
                <td>定义当文本改变时如何加载数据网格（datagrid）数据。如果组合网格（combogrid）从服务器加载就设置为 'remote'。当设置为 'remote' 模式时，用户输入的值将会被作为名为 'q' 的 http 请求参数发送到服务器，以获取新的数据。</td>
                <td>'remote'</td>
                <td></td>
            </tr>
            <tr>
                <td>filter</td>
                <td>function(q, row) 定义当 'mode' 设置为 'local' 时如何选择本地数据。返回 true 则选择该行。</td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>width</td>
                <td>组件的宽度。</td>
                <td>'auto'</td>
                <td></td>
            </tr>
            <tr>
                <td>panelWidth</td>
                <td>下拉面板宽度</td>
                <td>null</td>
                <td></td>
			</tr>
			<tr>
				<td>panelHeight</td>
				<td>下拉面板高度</td>
				<td>200</td>
				<td></td>
			</tr>
			<tr>
				<td>selectOnNavigation</td>
				<td>定义当通过键盘导航项目时是否选择项目</td>
				<td>false</td>
				<td></td>
			</tr>
			<tr>
				<td>editable</td>
				<td>定义用户是否可以往文本域中直接输入文字</td>
				<td>true</td>
				<td></td>
			</tr>
			<tr>
				<td>disabled</td>
				<td>是否禁用</td>
				<td>false</td>
				<td></td>
			</tr>
			<tr>
				<td>readonly</td>
				<td>是否只读</td>
				<td>false</td>
				<td></td>
			</tr>
			<tr>
				<td>hasDownArrow</td>
				<td>是否有下拉按钮</td>
				<td>true</td>
				<td></td>
			</tr>
			<tr>
				<td>delay</td>
				<td>从最后一个键的输入事件起，延迟进行搜索。</td>
				<td>200</td>
				<td></td>
			</tr>
			<tr>
				<td>isCombo</td>
				<td>是否输入字符即触发事件，进行搜索</td>
				<td>false</td>
				<td></td>
			</tr>
			<tr>
				<td>minQueryLen</td>
				<td>isCombo为true时，可以搜索要求的字符最小长度</td>
				<td>0</td>
				<td></td>
			</tr>
			<tr>
				<td>queryOnSameQueryString</td>
				<td>在查询条件和上一次一致时，回车或点击下拉按钮是否重新搜索</td>
				<td>true</td>
				<td></td>
			</tr>
            <!--   ***************分割线  事件******************************************************                  -->
            <tr class="evttitle">
                <th>事件名</th>
                <th>说明</th>
                <th>入参</th>
                <th></th>
            </tr>
            <tr>
                <td>onBeforeShowPanel</td>
                <td>下拉面板展开前触发，若返回值是false,则阻止展开</td>
                <td>null</td>
                <td></td>
			</tr>
            <tr>
                <td>onShowPanel</td>
                <td>当下拉面板显示的时候触发.</td>
                <td>null</td>
                <td></td>
			</tr>
			<tr>
				<td>onHidePanel</td>
				<td>隐藏时触发</td>
				<td>null</td>
				<td></td>
            </tr>
             <!--   ***************分割线  方法******************************************************                  -->
            <tr class="mthtitle">
                <th>方法名</th>
                <th>说明</th>
                <th>入参</th>
                <th>返回值</th>
            </tr>
            <tr>
                <td>options</td>
                <td>拿到配置项对象</td>
                <td></td>
                <td>配置对象</td>
            </tr>
            <tr>
                <td>grid</td>
                <td>返回数据网格（datagrid）对象 <br>此方法虽存在，但是获取的grid未必对应此lookup 因为所有的lookup都使用一个grid</td>
                <td></td>
                <td>jquery对象</td>
            </tr>
            <tr>
                <td>panel</td>
                <td>返回下拉面板对象。<br> 此方法虽存在，但是获取的panel未必对应此lookup 因为所有的lookup都使用一个panel </td>
                <td></td>
                <td>jquery对象</td>
			</tr>
			<tr>
				<td>setText</td>
				<td>设置文本框的值</td>
				<td>text</td>
				<td>jquery对象</td>
            </tr>
            <tr>
				<td>getText</td>
				<td>获取输入框的文本</td>
				<td></td>
				<td></td>
            </tr>
            <tr>
				<td>clear</td>
				<td>清空组件值</td>
				<td></td>
				<td>jquery对象</td>
            </tr>
            <tr>
				<td>reset</td>
				<td>重置组件的值</td>
				<td></td>
				<td>jquery对象</td>
            </tr>
            <tr>
				<td>resize</td>
				<td>调整组件宽度</td>
				<td>width</td>
				<td>jquery对象</td>
            </tr>
            <tr>
				<td>showPanel</td>
				<td>显示面板</td>
				<td></td>
				<td>jquery对象</td>
            </tr>
            <tr>
				<td>hidePanel</td>
				<td>隐藏面板</td>
				<td></td>
				<td>jquery对象</td>
            </tr>
            <tr>
				<td>disable</td>
				<td>禁用组件</td>
				<td></td>
				<td>jquery对象</td>
            </tr>
            <tr>
				<td>enable</td>
				<td>启用组件</td>
				<td></td>
				<td>jquery对象</td>
            </tr>
            <tr>
				<td>readonly</td>
				<td>启用/禁用只读模式。</td>
				<td>mode(true|false)</td>
				<td>jquery对象</td>
            </tr>
            <tr>
				<td>isValid</td>
				<td>返回验证结果</td>
				<td></td>
				<td>true|false</td>
			</tr>
        </table>
    </div>
	<prettyprint/>
</body>
</html>